<template>
	<view>
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view marginTop20" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)"
				@click="swichMenu(item.id - 1)">
				<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
					<text
						:class="currentTab==(item.id - 1) ?'menu-topic-text-select':'menu-topic-text'">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="content-view" v-for="(item,index) in swiperDateList" :key="index">
			<view class="item-text-name-view" @click="tap_item(item.content)">{{item.content}}</view>
			<view class="line"></view>
		</view>
		<view class="line-2"></view>
		<view class="custom-text-class" @click="customClick()">自定义车型名称</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{
						id: 1,
						name: '中东'
					},
					{
						id: 2,
						name: '加版'
					},
					{
						id: 3,
						name: '欧版'
					},
					{
						id: 4,
						name: '墨西哥版'
					},
					{
						id: 5,
						name: '美版'
					}
				],
				currentTab: 0,
				tabCurrent: 'tabNum1',
				// Tab切换内容
				swiperDateList: [
					{
						id: 1,
						content: '宝马宝马宝马'
					},
					{
						id: 2,
						content: '奔驰奔驰奔驰'
					},
					{
						id: 3,
						content: '奥迪奥迪'
					},
				],
			}
		},
		onLoad(option) {
			if (option.title) {
				uni.setNavigationBarTitle({
					title: option.title
				});
			}
		},
		methods: {
			swichMenu(id) {
				this.currentTab = id
				this.tabCurrent = 'tabNum' + id
			},
			swiperChange(e) {
				let index = e.detail.current
				this.swichMenu(index)
			},
			tap_item(brandName) {
				// 获取当前页上的栈（数组形式）
				var pages = getCurrentPages()
				//上上一页面 
				var prevPage = pages[pages.length - 3]
				var object = {
					'brandName': brandName
				}
				prevPage.$vm.backData(object) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
				// 返回上一页
				uni.navigateBack({
					delta: 2
				})
			},
			customClick() {
				uni.navigateTo({
					url: '/pages/home/allBrand/customVehicleModel/customVehicleModel'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: white;
	}

	.custom-text-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
		margin: 44rpx 28rpx;
	}

	.item-text-name-view {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000026;
		opacity: 1;
		padding: 38rpx 0rpx;
	}

	.top-menu-view {
		white-space: nowrap;
		background-color: white;
		height: auto;

		.menu-topic-view {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;

			.menu-topic-text {
				padding: 10rpx 30rpx;

				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				opacity: 1;
			}

			.menu-topic-text-select {
				padding: 10rpx 30rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #0E59EA;
				opacity: 1;
			}

			.menu-topic-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;

				.menu-topic-bottom-color {
					width: 50rpx;
					height: 8rpx;
					border-radius: 6rpx;
				}
			}

			.menu-topic-act .menu-topic-bottom {
				display: flex;
				justify-content: center;
			}

			.menu-topic-act .menu-topic-bottom-color {
				background: #3957BF;
			}
		}
	}

	.content-view {
		width: 100%;
		background-color: white;
		padding: 0rpx 28rpx;
	}

	.marginTop50 {
		margin-top: 60rpx;
	}

	.bac-F7 {
		background-color: #F7F8FA;
	}

	.pad20 {
		padding: 30rpx;
	}

	.height60 {
		height: 60rpx;
	}

	.line {
		width: 695rpx;
		height: 0rpx;
		border: 1px solid #00000003;
	}

	.line-2 {
		width: 100%;
		height: 28rpx;
		background: #F5F5F5;
	}

	.marginTop20 {
		margin-top: 20rpx;
	}
</style>